import "./index.scss";
import DefaultAvatarImg from "./image/default_avatar1.png";
import { useEffect, useState } from "react";
import { ModernSimpleInput } from "@/cuicui/common-ui/inputs/modern-simple-input/modern-simple-input";
import { Dock } from "@/common-ui/navigation/navigation";

const LoginPage = () => {
  // 密码值
  const [passwordValue, setPasswordValue] = useState("");

  // 登录加载标识
  const [isLoginLoading, setIsLoginLoading] = useState(false);

  // effect
  useEffect(() => {
    // 禁用图片拖拽
    document.querySelectorAll("img").forEach(function (img) {
      img.addEventListener("dragstart", function (event) {
        event.preventDefault();
      });
    });
  }, []);

  // 密码输入框键盘事件
  const passwordKeyDown = (e) => {
    if (e.key === "Enter") {
      console.log("#输入框回车", passwordValue);
      login();
    }
  };

  // 登录方法
  const login = () => {
    setIsLoginLoading(true);
    setTimeout(() => {
      setIsLoginLoading(false);
    }, 2500);
  };

  return (
    <>
      <div className="login_wrap">
        <div className="login_content_card">
          <div className="user_box">
            <div className="avatar_box">
              <img className="avatar_img" src={DefaultAvatarImg} alt="" />
            </div>
            <span className="user_name">Administrator</span>
          </div>
          <div className="input_box">
            {/* 密码输入框 */}
            <ModernSimpleInput
              className="w-72 login_password_input"
              onChange={(e) => setPasswordValue(e.target.value)}
              placeholder="请输入密码"
              type="password"
              value={passwordValue}
              onKeyDown={passwordKeyDown}
              disabled={isLoginLoading}
            />

            {/* 登录加载动画 */}
            {isLoginLoading ? <div class="loader"></div> : null}
          </div>
        </div>
      </div>
    </>
  );
};

export default LoginPage;
